<template>
    <el-container>
        <el-container class="is-vertical">
            <div class="panel-search-box">
                <div class="panel-search">
                    <el-input v-model="search.userName" placeholder="学员姓名" clearable  class="w165"></el-input>
                    <el-input v-model="search.teacherName" placeholder="教练姓名" clearable  class="w165"></el-input>
                    <el-select v-model="search.courseType" placeholder="课程类型" clearable filterable >
                        <el-option label="30分钟课" :value="1"></el-option>
                        <el-option label="60分钟课" :value="2"></el-option>
                        <el-option label="体验课" :value="4"></el-option>
					</el-select>
                    <el-date-picker v-model="search.timeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
							range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" class="sDateSelect" style="margin-left:10px;"
						>
                    </el-date-picker>
                    <el-select v-model="search.isEffect" placeholder="有效" clearable filterable >
                        <el-option label="有效" :value="1"></el-option>
                        <el-option label="无效" :value="0"></el-option>
					</el-select>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportHander">导出</el-button>
                </div>
            </div>
            <el-main class="nopadding">
                <scTable ref="table" :apiObj="$API.learn.list" :params="search" remoteSort @dataChange="dataChange" :exportData="exportData" :formatExportData="formatExportData">
                    <el-table-column label="序号" prop="index" width="70" align="left"></el-table-column>
                    <el-table-column label="学员" prop="user" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            {{scope.row.user ? scope.row.user.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="机构" prop="agent" align="center" width="160">
                        <template #default="scope">
                            {{scope.row.agent ? scope.row.agent.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="教练" prop="teacher" align="center" width="120">
                        <template #default="scope">
                            {{scope.row.teacher ? scope.row.teacher.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="抗遗忘教练" prop="reviewTeacher" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.reviewTeacher ? scope.row.reviewTeacher.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="课程名称" prop="course" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.course ? scope.row.course.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="课程类型" prop="words" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.courseType ? scope.row.courseType.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="交付方式" prop="listenType" width="120" align="center">
                        <template #default="scope">
                            {{scope.row.listenType ? scope.row.listenType.name : ''}}
                        </template>
                    </el-table-column>
                    <el-table-column label="总数" prop="totalWords" width="120" align="center"></el-table-column>
                    <el-table-column label="正确数" prop="rightNumber" width="120" align="center"></el-table-column>
                    <el-table-column label="错误数" prop="wrongNumber" width="120" align="center"></el-table-column>
                    <el-table-column label="上课时间" width="150" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.startTime }}</span><br>
                            <span>{{ scope.row.endTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="有效" width="150" align="center">
                        <template #default="scope">
                            <el-tag size="mini" v-if="scope.row.isEffect.value == 0" type="danger">{{scope.row.isEffect.name}}</el-tag>
                            <el-tag size="mini" v-if="scope.row.isEffect.value == 1" type="success">{{scope.row.isEffect.name}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center" width="200">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
                            <el-divider direction="vertical" v-if="scope.row.status.value == 2"></el-divider>
                            <el-button type="text" size="small" @click="reportFun(scope.row)" v-if="scope.row.status.value == 2">报告</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button type="text" size="small" @click="printFun(scope.row)">打印</el-button>
                            <el-divider direction="vertical" v-if="(userInfo.level && userInfo.level.id == 14) || scope.row.isReview.value == 1"></el-divider>
                            <el-dropdown v-if="(userInfo.level && userInfo.level.id == 14) || scope.row.isReview.value == 1">
                                <el-button type="text" size="small">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item v-if="scope.row.isReview.value == 1" @click="table_forget(scope.row)">抗遗忘</el-dropdown-item>
                                        <el-popconfirm v-if="scope.row.isEffect.value == 1 && userInfo.level && userInfo.level.id == 14" :title="'确认是否要改为无效？'" @confirm="table_effect(scope.row, 0)">
                                            <template #reference>
                                                <el-dropdown-item divided>无效</el-dropdown-item>
                                            </template>
                                        </el-popconfirm>
                                        <el-popconfirm v-if="scope.row.isEffect.value == 0 && userInfo.level && userInfo.level.id == 14" :title="'确认是否要改为有效？'" @confirm="table_effect(scope.row, 1)">
                                            <template #reference>
                                                <el-dropdown-item divided>有效</el-dropdown-item>
                                            </template>
                                        </el-popconfirm>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>


    <detail-dialog v-if="dialog.detail" ref="detailDialog" @closed="dialog.detail=false"></detail-dialog>

    <changeTeacherDialog v-if="dialog.changeTeacher" ref="changeTeacher" @closed="dialog.changeTeacher=false" @success="handleSuccess"></changeTeacherDialog>

    <el-dialog :close-on-click-modal="false" :title="'学习报告'" v-model="dialog.report" :width="700" destroy-on-close custom-class="notpt" @closed="dialog.report = false">
        <div style="height: 70vh;display: flex; margin-top: 30px;">
          <iframe 
          style="border: none;min-height: 0;display: flex;flex-direction: column;width: 100%;flex: 1;"
                :src="reportUrl" 
            ></iframe>
        </div>
    </el-dialog>

</template>

<script>
import detailDialog from './detail'
import changeTeacherDialog from './components/changeTeacher'
import config from '@/config'
export default {
    components: {
        detailDialog,
        changeTeacherDialog
    },
    data() {
        return {
            dialog: {
                detail: false,
                changeTeacher: false,
                report: false
            },
            search: {
                name: null,
                learnType: 1,
            },
            exportData: {
                header: ['机构编号', '机构名称', '课程名称', '学员账号', '学员姓名', '学员推荐人', '教练账号', '教练姓名', '抗遗忘教练', '课程类型', '交付方式', '上课时间', '结束时间', '总数', '正确数', '错误数', '有效性'],
                column: ['agentCode', 'agent', 'course', 'userAccount', 'userName', 'recommender', 'teacherAccount', 'teacher', 'reviewTeacher',  'courseType', 'listenType', 'startTime', 'endTime', 'totalWords', 'rightNumber', 'wrongNumber', 'isEffect'],
                filename: '上课记录列表',
                formatData: true
            },
            userInfo: {},
            reportUrl: ''
        }
    },
    created() {
        this.userInfo = this.$TOOL.data.get("G_USER_INFO");
    },
    mounted() {
        
    },
    methods: {
        dataChange(res, tableData) {
			let total = res.data.total
            let perPage = res.data.perPage
            let page = (this.$refs.table && this.$refs.table.currentPage) || 1
            tableData.forEach((item, index) => {
				item.index = page * perPage + index - perPage + 1
            })
        },
        //查看
        table_show(row) {
            this.dialog.detail = true
			this.$nextTick(() => {
				this.$refs.detailDialog.open(row.id)
			})
        },
        //更换抗遗忘教练
        table_forget(row) {
            this.dialog.changeTeacher = true
			this.$nextTick(() => {
				this.$refs.changeTeacher.open(row.id)
			})
        },
        exportHander() {
			this.$refs.table.exportHander(this.search)
		},
		formatExportData(item) {
            item.agentCode = item.agent ? item.agent.code : ''
            item.agent = item.agent ? item.agent.name : ''
            item.course = item.course ? item.course.name : ''
            item.userAccount = item.user ? item.user.account : ''
            item.recommender = item.user ? item.user.recommender : ''
            item.userName = item.user ? item.user.name : ''
            item.teacherAccount = item.teacher ? item.teacher.account : ''
            item.teacher = item.teacher ? item.teacher.name : ''
            item.courseType = item.courseType ? item.courseType.name : ''
            item.listenType = item.listenType ? item.listenType.name : ''
            item.reviewTeacher = item.reviewTeacher ? item.reviewTeacher.name : ''
            item.isEffect = item.isEffect ? item.isEffect.name : ''
            return item
        },
        //打印
        printFun(row) {
            if (row.printUrl) {
                window.open(row.printUrl)
            }
        },
        // 报告
        reportFun(row) {
            this.reportUrl = config.baseUrl + '/student/report/learn-report.html?id=' + row.id + '&userId=' + row.user.id
            this.dialog.report = true
        },
        //是否有效修改
        async table_effect(row, value) {
            await this.$API.learn.updateEffect.put({ id: row.id, isEffect: value }).then(() => {
                this.$refs.table.refresh()
                this.$notify.success("更新成功")
            });
        },
        // 搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        //本地更新数据
        handleSuccess() {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style>
.position {
    display: flex;
    align-items: center;
}
.position-item {
    margin-right: 5px;
}
.position-item:last-child {
    margin-right: 0;
}
</style>
